<template>
  <div class="completion" >

    <Title :isNecessary="question.isNecessary" :no="no" :title="question.title"></Title>
    <div class="option">
      <el-button plain style="width: 300px; color: silver" @click="modify">{{content}}</el-button>
    </div>
  </div>
</template>

<script>
import Title from './Title.vue'
import {jsonp} from 'vue-jsonp'

export default {
  name:'CompletionCard',
  components: {
    Title,
  },
  data(){
    return {
      content: '点击获取地理位置信息'
    }
  },
  props: {
    question: {
      type: Object,
      default: {}
    },
    no: {
      type: Number,
      default: 0
    },
    input: {
      type: String,
      default: '点击获取地理位置信息'
    }
    // radio: {
    //   type: Number,
    //   default: 0,
    // }
  },
  emits: ['changeCompletion'],
  methods: {
    modify() {
      this.$confirm('获取地理位置信息将调用您的地理隐私权限，请确认', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          key: 'CCYBZ-257K4-UL7UB-X4FDY-I5LNS-JMF6J',
          output: 'jsonp'
        }
        let url = "https://apis.map.qq.com/ws/location/v1/ip"
        jsonp(url, data).then(res => {
          if(res.status === 0){
            this.content = res.result.ad_info.province + res.result.ad_info.city
            this.question.content = this.content
            this.$emit('changeCompletion', this.question) //TODO 也许需要修改名字
            console.log(res);
          }
        })
      }).catch(() => {
        this.$message.info('需点击确认才能获取您的地理位置信息')
      })

    },

  },
}
</script>

<style scoped src='assets/css/fillcss/completion.css'>
  /* @import url('../css/completion.css'); */
  
</style>
